import { connect } from '@tarojs/redux';
import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import { AtGrid,AtDivider } from "taro-ui"
import './index.less'
import downBack from '../../img/downBack.png'
import searchImg from '../../img/searchimg.png'

@connect(({ home }) => ({ home }))
export default class Index extends Component {

  config = {
    navigationBarTitleText: '智享购'
  }
  constructor () {
    super(...arguments);
  }

  // handleJump(){
  //   Taro.navigateTo({
  //     url:'../listDetails/index'
  //   })
  // }
  handleJump = (item,key) => {
  console.log('onClick','item',item);
  console.log('onClick','key',key);
  const {category}= this.props.home;
  const id=category[key].id;
  console.log('onClick','id',id);
  Taro.navigateTo({
    url:`../listDetails/index?id=${id}&item=${item.value}`
  })
  }

  componentWillMount () {
    console.log('home componentWillMount');
    const { dispatch } = this.props;
    dispatch({ type: 'home/init' });
  }


  render () {
    const {banners,classify,stores,category}= this.props.home;
    console.log('home render banners', banners);
    console.log('home render classify', classify);
    console.log('home render stores', stores);
    console.log('home render category', category);
    const grid = category?category.map(item=>({image:item.imageUrl,  value: item.name })):[];
    const recommend=stores[parseInt(Math.random()*stores.length)];
    const data = {
      banner:'http://iph.href.lu/300x200?text=占位',
      grid:[
          {
            image: category.imageHash,
            value: category.name,
            id: category.id,
          }
      ],
      fourImg:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:3,
          img:'http://iph.href.lu/300x200?text=占位'
        },{
          id:4,
          img:'http://iph.href.lu/300x200?text=占位'
        }
      ],
      guessLike:{
        img:'http://iph.href.lu/300x200?text=占位',
        title:'薄荷小院',
        introduce:'[商之都]双人套餐,提供免费wifi',
        distance:11.6,
        price:79,
        storePrice:99,
        number:99
      }
    }
    return (
      <View className='index'>
        {/*---------第一行地址及搜索框------*/}
        <View className='homeTopFirstLine'>
          {/*----左边位置----- */}
          <View className='leftLocation'>
            <Text>合肥</Text>
            <Image src={downBack} className='downBack' />
          </View>
          {/*-------右边搜索框----- */}
          <View className='rightSearchBox'>
            <Image src={searchImg} className='searchImg' />
            <Input
              type='text'
              placeholder='请输入商家名、品类或者商圈'
              className='input'
            />
          </View>
        </View>
        {/*-----------banner图-------- */}
        <View>
          <Image src={data.banner} className='banner' />
        </View>

        <View className='Grid'>
          <AtGrid
            hasBorder={false}
            columnNum={5}
            data={grid}
            onClick={this.handleJump}
          />
        </View>
        {/**-------4个广告图------- */}
        <View className='fourImgBox'>
          {data.fourImg.map(item=>(
            <View key={item.id}>
              <Image src={item.img} className='oneImg' />
            </View>
          ))}
        </View>
        {/*-------猜你喜欢------- */}
        <View className='guessLike'>
            {/**------上部文字----- */}
            <View>
              <View className='line' />
              <AtDivider content='猜你喜欢' fontColor='#8d8d8d' lineColor='#bfbfbf' />
              <View className='line' />
            </View>
            {/**------喜欢主体内容----- */}
            <View className='likeBodyBox'>
              {/**左边图片 */}
              <Image src={recommend.imageHash} className='likeImg' />
              {/**右边详情 */}
              <View className='right_details'>
                <Text className='right_details_title'>{recommend.name}</Text>
                <View className='second-line'>
                  <Text className='second_line_introduce'>{recommend.address}</Text>
                  <Text className='second-line_distance'>{data.guessLike.distance}km</Text>
                  {/*<Text style={{ fontSize: 14 }}>{recommend.distance > 1000 ? `${Math.round(recommend.distance / 1000)}KM` : (`${recommend.distance}M`) }</Text>*/}
                </View>
                <View className='three_line'>
                  <View className='three_line_left'>
                    <Text className='three_line_left_price'>￥{data.guessLike.price}</Text>
                    <Text className='three_line_left_storePrice'>门市价:￥{data.guessLike.storePrice}</Text>
                  </View>
                  <Text className='three_line_number'>已售{data.guessLike.number}</Text>
                </View>
              </View>
            </View>
        </View>
      </View>
    )
  }
}
